<template>
    <div>
        <y-form ref="formRef" :options="formOptions">

            <template #price="{ data }">
                <span class="font-bold text-lg text-yellow-500">{{ data.count * data.unitPrice * 2 }}</span> 元
            </template>
        </y-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formOptions: {
                data: {},
                items: [
                    {
                        field: 'count', title: '重量/kg',
                        itemRender: {
                            name: 'VxeInput',
                            props: {
                                type: 'number',
                            }
                        }
                    },
                    {
                        field: 'unitPrice', title: '单价',
                        titleSuffix: {
                            content: '每500g'
                        },
                        itemRender: {
                            name: 'VxeInput',
                            props: {
                                type: 'number',
                                prefixIcon: 'vxe-icon-rmb'
                            }
                        },
                    },
                    {
                        title: '总价',
                        titleSuffix: {
                            content: '总价 = 重量/kg * 2 * 单价'
                        },
                        slots: { default: 'price' }
                    }
                ]
            }
        }
    },
    mounted() {
        const initData = {
            "count": "1.5",
            "unitPrice": "9"
        }
        this.$refs.formRef.setData(initData)
    }
}
</script>

<style lang="scss" scoped></style>